<template>
    
    <div class="rows-container">
        
        <el-row class="row-1">
            <el-col :span="24" style="height: 33.33vh; text-align: center;">
                <img src="../assets/img/start-bg.png" alt="" class="bg-img">
            </el-col>
        </el-row>

        <el-row class="row-2" style="margin-top: 40px;">
            <div style="color: #AEB5B5; font-weight: bold; font-size: large; margin-bottom: 10px;">目录</div>
            <el-col :span="24">
                <div class="dirbox-wrapper">
                    <template v-for="item in dirList">
                        <DirBox :title="item.title" style="margin: 5px 5px;" @click="handleDirBoxClick(item.link)"></DirBox>
                    </template>
                </div>
            </el-col>
        </el-row>
        <el-row class="row-2" style="margin-top: 40px;">
            <div style="color: #AEB5B5; font-weight: bold; font-size: large; margin-bottom: 10px;"></div>
            <el-col :span="24">
                <ul style="color: #AEB5B5;">
                    <li>该软件依赖Typora, 请自行安装, 需将安装目录加入环境变量。</li>
                    <li>typora->偏好设置->图像： 插入图片时, 复制到指定路径: <span style="color: #f07ca5;">./assets/images/</span></li>
                </ul>
            </el-col>
        </el-row>

    </div>
        
    <el-row class="bottom-row">
        <el-col :span="12">
            <div class="info">
                <p>作者: hhllxx</p>
                <p>版本: V1.0.0</p>
            </div>


        </el-col>
        <el-col :span="12" style="display: flex; justify-content: flex-end; overflow: hidden;">
            <el-button @click="startService" :type="currentStatus.color" :disabled="currentStatus.disabled" round style="width: 250px; height: 40px;">{{ currentStatus.text }}</el-button>
        </el-col>
    </el-row>

</template>



<script setup>
import DirBox from '../components/DirBox.vue';
import { ref, watch } from 'vue';
import { useConfigStore } from "../stores/config"
import { useRoute, useRouter} from 'vue-router';


const configStore = useConfigStore()

const dirList = [
    {title: "根目录", link: "/"},
    {title: "笔记目录", link: "/posts"},
]


const handleDirBoxClick = (relPath) => {
    window.api.openDirByExplore(relPath)
}


const Status = {
    "stopped": {    
        text: "启动服务",
        color: "success",
        disabled: false 
    },
    "running": {
        text: "正在运行中...",
        color: "info",
        disabled: true
    }
}
const currentStatus = ref(configStore.runningFlag ? Status.running : Status.stopped)
watch(() => configStore.runningFlag, (newValue) => { 
    if (newValue) {
        currentStatus.value = Status.running
    } else {
        currentStatus.value = Status.stopped
    }
})
const startService = async () => {
    configStore.setRunningFlag(true)
    const port = await window.api.getVitepressPort()
    window.api.startService(port)
    configStore.setStdoutLog("user", "3de446",`正在启动vitepress服务，端口：${port}，请稍等...`)
}
</script>

<style lang="scss" scoped>
.rows-container {
    display: flex;
    flex-direction: column;
    justify-content: start;
    padding-top: 20px;
    height: 84%;
    .row-1{
        .bg-img{
            width: 100%; 
            height: 100%; 
            border-radius: 10px;
            object-fit: cover;
            max-width: 1400px;
        }
    }
    .row-2{
        .dirbox-wrapper{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
    }


}
.bottom-row{
    .info{
        font-size: 14px;
        p{
            color: #AEB5B5;
        }
    }
}
</style>